<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>窗前</h1>
    <div id = 'haha'>
      代码
      <p class="num">1223</p>
      <p class="num">345</p>
      <!-- hh -->
      <p name="me">这就是<b>我</b></p>
    </div>
      <input type="text" value="正确">
    <script>
      //整个root文档
  //     console.log(document.documentElement);
  //   console.log(document.head);
  //   console.log(document.body)
  //  document.title = 'hahha'
  //  console.log(document.title)
        //查找元素节点的方法
        //通过ID元素查找
    // var eleId = document.getElementById('haha')
    // //获取所有的子元素
    // console.log(eleId.children[2])
    // //获取所有的子节点
    // console.log(eleId.childNodes)

    // var eleTag = document.getElementsByTagName('p');
    //  eleTag[0].innerText = '李白'
    //  eleTag[0].style.color = 'red'
    //  console.log(eleTag[0]);

    // var eleId = document.getElementById('haha')
    // var eleTag = eleId.getElementsByTagName('p')
    //选中索引为2的元素，并改变颜色
    // eleTag[2].style.color = 'red'
  
      //通过css查找元素节点
  //  var sele = document.querySelector('#haha p:first-of-type')
  //    console.log(sele);
  //    sele.style.color ='red';
  //    sele. innerText = 'jjklk'

  //通过class选元素节点
  // var yuansu = document.getElementsByClassName('num')
  // console.log(yuansu)
  // yuansu[0].innerText = '345'
  // yuansu[0].style.color = 'red'
  // yuansu[0].style.backgroundColor = 'blue'

  // 通过name 选元素节点  疑问
  // arguments是伪数组，只能通过索引获取
  // var yuansu = document.getElementsByName('me')
  // console.log(yuansu)
  // yuansu[0].innerText = 'fsaf'
  // yuansu[0].style.color ='green'
  //     //操作标签内部元素，包含标签
  //  console.log(yuansu[0].innerHTML);
  //  //操作标签内部文本，不包含标签
  //  console.log(yuansu[0].innerText);


  // 区分类型
  // var boxEle = document.getElementById('haha')
  // // 找子元素节点
  // console.log(boxEle.children)
  // // 找所有的子节点
  // console.log(boxEle.childNodes)
  // console.log(boxEle.childNodes[0].nodeType);
  // console.log(boxEle.childNodes[1].nodeType)

     // 单标签通过value获取
    //  var single = document.getElementsByTagName('input')
    //  console.log(single[0].value)

    //文本节点
    var single = document.getElementById('haha')
    single.childNodes[0].textContent = 'dfahkjf'
   

    </script>
  </body>
</html>
